<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/商品1-详情.css">
    <script src="./js/flexible.js"></script>
    <script src="./js/better-scroll.min.js"></script>

</head>

<body>
    <div class="header">
        <img src="./images/fanhui.png">
        <h1>商品详情</h1>
    </div>
    <div class="bannerBox">
        <div class="bannerCon">
            <ul class="dispfx">
                <li><img src="./images/lunbo.png" alt=""></li>
                <li><img src="./images/lunbo.png" alt=""></li>
                <li><img src="./images/lunbo.png" alt=""></li>
                <li><img src="./images/lunbo.png" alt=""></li>
            </ul>
        </div>
        <div class="bannerIndicator">
            <ul class="dian">
                <li class="on"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div class="biaoti">
        <div class="bt-tp">
            <div class="cuxiao">
                <img src="./images/促销.png"> 莫次有机PWE活性美白洗面奶
            </div>
            <div class="jiage">
                <div class="jg-lt">
                    ￥169 <s>￥220</s>
                </div>
                <div class="jg-rt">
                    买够200元包邮
                </div>
            </div>
        </div>
        <div class="guige">
            <div class="gg-lt">
                规格
            </div>
            <div class="gg-rt">
                标准 <img src="./images/tiaozhuan.png" style="margin-left: .2667rem;">
            </div>
        </div>
    </div>
    <div class="hui"></div>
    <div class="fenlei">
        <ul>
            <li style="border-left: none;" class="blue">
                详情
            </li>
            <li>
                评价
            </li>
            <li style="border-right: none;">
                售后
            </li>
        </ul>
    </div>
    <img src="./images/详情.png" alt="">
    <div class="di">
        <ul>
            <li class="hei">
                <div class="kefu">
                    <img src="./images/客服.png">
                    <div>客服</div>
                </div>
                <div class="shoucang">
                    <img src="./images/收藏.png">
                    <div>收藏</div>
                </div>
            </li>
            <li class="zi">
                加入购物车
            </li>
            <li class="lan">
                立即购买
            </li>
        </ul>
    </div>
</body>
<script>
    var bs = BetterScroll.createBScroll(".bannerCon", {
        // ① 开启横向滚动，禁止纵向滚动
        scrollX: true,
        scrollY: false,
        // ② 保留轮播图上，纵向的原生滚动
        eventPassthrough: true,
        // ③ 开启轮播
        slide: {
            loop: true,
            threshold: 0.1,
            speed: 400,
            listenFlick: true,
            autoplay: false,
            interval: 3000
        },
        // 设置为false,解决轮播快速切换时的闪烁问题
        momentum: false,
        // 当loop为true时，设置此项为false,可以解决拖动过快产生空白的问题
        bounce: false
    });
    bs.on('scrollEnd', () => {
        var lis = document.querySelectorAll('.bannerIndicator li');
        var page = bs.getCurrentPage().pageX;
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = '';
        }
        lis[page].className = 'on';
    });
</script>

</html>